<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS轮播图</title>
    <style>
        *{
            margin:0;
            padding:0;
            user-select: none;
        }

        #container{
            width: 650px;
            height: 430px;
            margin: 100px auto 0;
            box-shadow: 0px 0px 10px 5px #6c6c6c;

            position: relative;
        }

        .img{
            width: 650px;
            height: 430px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: all linear 0.1s;
        }

        #container .img.active{
            opacity: 1;
        }

        .img img{
            width: 100%;
            height: 100%;
        }

        #left,#right{
            height: 430px;
            line-height: 430px;
            width: 100px;
            text-align: center;
            font-size: 100px;
            font-weight: bold;
            color: pink;
            cursor: pointer;
            position: absolute;
            top: 0;
            background: rgba(0, 0, 0, .8);
            opacity: 0;

            transition: all linear .1s;
        }

        #left{
            left: 0;
        }

        #right{
            right: 0;
        }

        #container:hover #left, #container:hover #right{
            opacity: .5;
        }

        #container #left:hover, #container #right:hover{
            opacity: 1;
        }

        #more{
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 5px;
            text-align: center;
        }

        #more span{
            width: 20px;
            height: 20px;
            display: inline-block;
            background: black;
            border-radius: 100px;
            margin-right: 10px;
            cursor: pointer;

            transition: all linear .1s;
        }

        #more span.active{
            background: rgb(255, 0, 93);
        }

        #more span:hover{
            background: rgb(255, 0, 93);
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="img"><img src="./images/1.jpg" /></div>
        <div class="img"><img src="./images/2.jpg" /></div>
        <div class="img"><img src="./images/3.jpg" /></div>
        <div class="img"><img src="./images/4.jpg" /></div>

        <div id="left">&lt;</div>
        <div id="right">&gt;</div>

        <div id="more"></div>
    </div>
</body>
</html>

<script src="./jquery.min.js"></script>

<script>
    
    var index = 0

    var timer;

    $(".img").each(function(key, item){
        if(key == index)
        {
            $("#more").append("<span class='active'></span>")
            $(this).addClass("active")
        }else
        {
            $("#more").append("<span></span>")
        }
    })

    $("#left").click(function(){
        if(index <= 0)
        {
            index = $(".img").length - 1
        }else
        {
            index--;
        }

        $(".img").eq(index).addClass("active").siblings().removeClass("active")
        $("#more span").eq(index).addClass("active").siblings().removeClass("active")
    })

    $("#right").click(function(){
        if(index >= $(".img").length - 1)
        {
            index = 0
        }else
        {
            index++;
        }

        $(".img").eq(index).addClass("active").siblings().removeClass("active")
        $("#more span").eq(index).addClass("active").siblings().removeClass("active")
    })

    $("#more span").click(function(){


        index = $(this).index()

        $(".img").eq(index).addClass("active").siblings().removeClass("active")
        $("#more span").eq(index).addClass("active").siblings().removeClass("active")
    })

    function autoplay()
    {
        if(index >= $(".img").length - 1)
        {
            index = 0
        }else
        {
            index++;
        }

        $(".img").eq(index).addClass("active").siblings().removeClass("active")
        $("#more span").eq(index).addClass("active").siblings().removeClass("active")
    }

    timer = setInterval(autoplay, 1000)

    $("#container").mouseover(function(){
        clearInterval(timer)
    })

    $("#container").mouseover(function(){
        timer = setInterval(autoplay, 1000)
    })
    
</script>